<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" @Launchform="Launchform" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <div style="width: 20%">
          <h1>{{ $t(`Print.LeftoverInformation`) }}</h1>
          <Table
            :isLoading="isLoading7"
            @selectList="selectedList"
            @currentRow="currentRow1"
            :selection="true"
            :tableHeader="tableHeader"
            :tableData="ResidualMaterialInformationQueryMethodsTableDateList"
            :TableHeight="100"
            :outTableHeight="60"
          />
        </div>
        <div style="width: 60%; margin-left: 10px">
          <h1>{{ $t(`Print.TransferTheMaterialDetailsOfTheSiloToTheLeftovers`) }}</h1>
          <Table
            :isLoading="isLoading8"
            @currentRow="currentRow2"
            :tableHeader="tableHeader1"
            :tableData="TurnOverBinDetailQueryMethodsTableDateList"
            :TableHeight="100"
            :outTableHeight="60"
          />
        </div>
      </div>
      <PageModule :PageData="{ pageSizeShow: true }" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TransferLeftoverMaterialsOut'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  TurnOverBinDetailQuery,
  ResidualMaterialInformationQuery,
  TheRemainingBinMaterialIsDeleted,
  ResidualMaterialConfirmationOperation
} from '@/api/WarehouseDepartment/FactoryStorage/TransferLeftoverMaterialsOut'
import type {
  TurnOverBinDetailQueryParms,
  ResidualMaterialInformationQueryParms
} from '@/api/WarehouseDepartment/FactoryStorage/TransferLeftoverMaterialsOut'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
const isLoading7 = ref(false)
const isLoading8 = ref(false)

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入单据号码',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '转入日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '剩料仓材料删除'
  },
  {
    type: 'button',
    checkboxLabel: '打勾记录确认'
  },
  {
    type: 'input',
    inputPlaceholder: '单据号码',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '取消确认'
  }
])

const findData = (row: any) => {
  if (row === '剩料仓材料删除') {
    if (TheRemainingBinMaterialIsDeletedMehtodsParms.value === '') {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc3()
    }
  }

  if (row === '打勾记录确认') {
    if (slipNoList.value.length === 0) {
      JMessage.warning('请选择需要打勾记录的数据')
    } else {
      typeList.value = 1
      ResidualMaterialConfirmationOperationMethods()
    }
  }

  if (row === '取消确认') {
    if (formList1.value[4].inputValue === '') {
      JMessage.warning('请输入单据号码进行取消')
    } else {
      typeList.value = 2
      ResidualMaterialConfirmationOperationMethods()
    }
  }
}

// 剩料确认作业
const slipNoList = ref<any>([])

const typeList = ref(0)

const selectedList = (row: any) => {
  slipNoList.value = row.map((itme: any) => {
    return itme.slipNo
  })
}

const ResidualMaterialConfirmationOperationMethods = async () => {
  const result = await ResidualMaterialConfirmationOperation(slipNoList.value, typeList.value)
  if (result.code === 200) {
    slipNoList.value = []
    formList1.value[4].inputValue = ''
    TurnOverBinDetailQueryMethods()
    JMessage.success(result.message)
  } else {
    slipNoList.value = []
    formList1.value[4].inputValue = ''
    TurnOverBinDetailQueryMethods()
    JMessage.error(result.message)
  }
}

// 剩料资料删除
const TheRemainingBinMaterialIsDeletedMehtodsParms = ref('')

const currentRow2 = (row: any) => {
  const { mtlNo } = row
  TheRemainingBinMaterialIsDeletedMehtodsParms.value = mtlNo
}

const TheRemainingBinMaterialIsDeletedMehtods = async () => {
  const result = await TheRemainingBinMaterialIsDeleted(TurnOverBinDetailQueryMethodsParms.value, TheRemainingBinMaterialIsDeletedMehtodsParms.value)
  if (result.code === 200) {
    TurnOverBinDetailQueryMethods()
    TheRemainingBinMaterialIsDeletedMehtodsParms.value = ''
    JMessage.success(result.message)
  } else {
    TheRemainingBinMaterialIsDeletedMehtodsParms.value = ''
    TurnOverBinDetailQueryMethods()
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc3 = () => {
  ElMessageBox.confirm('确认要删除该数据吗?')
    .then(async () => {
      TheRemainingBinMaterialIsDeletedMehtods()
    })
    .catch(() => {})
}

// 转剩料仓查询
const TurnOverBinDetailQueryMethodsParms = ref('')

const TurnOverBinDetailQueryMethodsTableDateList = ref<TurnOverBinDetailQueryParms[]>([])

const TurnOverBinDetailQueryMethods = async () => {
  isLoading8.value = true
  const result = await TurnOverBinDetailQuery(TurnOverBinDetailQueryMethodsParms.value)
  TurnOverBinDetailQueryMethodsTableDateList.value = result
  isLoading8.value = false
}

const currentRow1 = (row: any) => {
  const { slipNo } = row
  TurnOverBinDetailQueryMethodsParms.value = slipNo
  TurnOverBinDetailQueryMethods()
}

// 剩料资料查询
const ResidualMaterialInformationQueryMethodsTableDateList = ref<ResidualMaterialInformationQueryParms[]>()

const slipNo = ref('')

const slipDateStart = ref('')

const slipDateEnd = ref('')

const ResidualMaterialInformationQueryMethods = async () => {
  isLoading7.value = true
  const result = await ResidualMaterialInformationQuery(slipNo.value, slipDateStart.value, slipDateEnd.value)
  ResidualMaterialInformationQueryMethodsTableDateList.value = result
  if (result.length > 0) {
    TurnOverBinDetailQueryMethodsParms.value = result[0].slipNo
    TurnOverBinDetailQueryMethods()
  }
  isLoading7.value = false
}

const Launchform = (row: any) => {
  slipNo.value = row[0].inputValue
  slipDateStart.value = row[1].dateValue === '' ? '' : row[1].dateValue[0]
  slipDateEnd.value = row[1].dateValue === '' ? '' : row[1].dateValue[1]
  slipNoList.value.push(row[4].inputValue)
  ResidualMaterialInformationQueryMethods()
}

// 统一调用接口
const interAceFunct = () => {
  ResidualMaterialInformationQueryMethods()
}

onMounted(() => {
  interAceFunct()
})

// 表格数据
const tableHeader = ref([
  {
    label: '单据号码',
    prop: 'slipNo'
  },
  {
    label: '转入日期',
    prop: 'slipDate'
  },
  {
    label: '转入人员',
    prop: 'sysUser'
  }
])

const tableHeader1 = ref([
  {
    label: '剩料原因',
    prop: 'slipReason'
  },
  {
    label: '物料编号',
    prop: 'mtlNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
